<template>
	<view>

		<!-- 数据内容 -->
		<view class="listbox">
			<view v-for="(item,index) in arrlist" :key="index" class="listview">
				<view class="listitem flex ac">
					<view class="list-title">反馈问题</view>
					<view class="list-text">{{item.title}}</view>
				</view>
				<view class="listitem flex ac">
					<view class="list-title">反馈内容</view>
					<view class="list-texta">{{item.info}}</view>
				</view>
				<view v-if="item.picture.length>0" class="listitem flex">
					<view class="list-title">截图凭证</view>
					<view class="listitembox">
						<view class="listimage" v-for="(items,indes) in item.picture" :key="indes"
							@tap="viewImage(indes,item.picture)">
							<image :src="items"></image>
						</view>
					</view>
				</view>
				<view v-if="item.video_piture" class="listitem flex">
					<view class="list-title">视频凭证</view>
					<view class="listimage" @click="chooseVideo(item.video)">
						<image :src="item.video_piture">
						</image>
					</view>
				</view>
				<view class="listitem flex ac">
					<view class="list-title">反馈时间</view>
					<view class="list-text">{{item.create_time}}</view>
				</view>
				<view class="listitem flex">
					<view class="list-title">反馈进度</view>
					<view>
						<view :class="item.fuckyou==false?'list-jindu':'list-jindua'">
							<view style="margin-bottom: 6rpx;">4,投诉完结</view>
							<view style="margin-bottom: 6rpx;">3,您手动点击已解决</view>
							<view style="margin-bottom: 6rpx;">2,您继续反馈：好卡</view>
							<view style="margin-bottom: 6rpx;">1,您提交问题反馈 2024-04-29 13:30:01</view>
						</view>
					</view>
				</view>

				<view style="display: flex;justify-content:flex-end;">
					<view class="zhankai" @click='changeToggle(index,item.fuckyou)'>
						<image class='entry'
							:style="item.fuckyou?'transform:rotate(270deg);transition: transform .2s ease-in-out;':'transform:rotate(90deg);transition: transform .2s ease-in-out;'"
							src="../../static/youicon.png">
						</image>
						{{item.fuckyou?'收起':'展开'}}
					</view>
				</view>

				<view style="width: 100%;height: 2rpx;background-color:#F0F0F0;"></view>

				<!-- 未解决已解决 -->
				<view class="buttombox">
					<view @click="explainopen" class="unresolved">未解决</view>
					<view class="resolved">已解决</view>
				</view>

			</view>
		</view>

		<!-- 弹窗 -->
		<view v-if="explainvalie==true" class="explainbox" @click="explainclose">
			<view class="explainview" @tap.stop="explainopen">
				<view class="explaintitle">填写问题反馈内容</view>
				<view class="textarea-box">
					<textarea bindinput="describe" maxlength="300" class="neirong"
						placeholder-style="font-size:26rpx;color:#8a8a8a;"
						placeholder="请详细说明您在产品使用过程中遇到的反馈,我们将全力为您解决反馈"></textarea>
				</view>
				<view class="buttombox">
					<view class="unresolved">已解决</view>
					<view @click="continuea" class="resolved">继续反馈</view>
				</view>
				<view style="width: 100%;height: 25rpx;"></view>
			</view>
		</view>

		<!-- 视频弹窗 -->
		<view class="preview-full" v-if="previewVideoSrc==true">
			<video :autoplay="true" :src="srcList" :show-fullscreen-btn="false">
				<cover-view class="preview-full-close" @click="previewVideoClose">
					<image style="width: 38rpx;height: 38rpx;"
						src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/mz_gr_ts_icon_shanchu-83bd5c6.png">
					</image>
				</cover-view>
			</video>
		</view>

		<!-- 上拉加载数据 -->
		<view class="loadmore">
			<view v-if="load" class="loading-more">
				<view class="more-bottom-line" style="display: flex;">
					<view class="more-loading"></view>
					<text class="more-lineTxt">正在加载...</text>
				</view>
			</view>
			<view v-if="nomore==false" class="more-finish">
				<view class="more-bottom-line">
					<view class="more-line"></view>
					<text class="more-lineTxt">暂无更多了~</text>
					<view class="more-line"></view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view v-if="nodata==true" class="nodatabox">
			<image style="width: 332rpx;" mode="widthFix"
				src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/ww_wawaji_kongbaiye-8084012.png">
			</image>
			<view class="nodatatext">暂无反馈记录</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	let app = getApp();
	export default {
		data() {
			return {
				previewVideoSrc: false,
				explainvalie: false,
				atisShow: false,
				arrlist: [],
				imagelist: [],
				srcList: '',
				pageIndex: 1,
				load: true,
				nomore: true,
				nodata: false,
				hasMore: false,
			}
		},

		onLoad(e) {
			this.datalist()
		},

		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.datalist() //调用函数
			}
		},

		methods: {
			previewVideoClose() {
				this.previewVideoSrc = false
			},

			chooseVideo(video) {
				this.srcList = video
				this.previewVideoSrc = true
			},

			//点击图片，放大预览
			viewImage(index, picturelist) {
				uni.previewImage({
					urls: picturelist,
					current: index
				});
			},

			//请求列表数据
			async datalist(e) {
				let apply = await request(`${getApp().globalData.http}user/list_suggest`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					page_num: this.pageIndex,
					page_size: 10,
				})
				if (apply.data.code == 0) {

					this.arrlist = this.arrlist.concat(apply.data.data)

					// 上拉加载数据
					if (apply.data.page_num == apply.data.total_num) {
						this.hasMore = false
					} else {
						this.hasMore = true
					}
					if (apply.data.data.length == 0) {
						this.nomore = true
						this.nodata = true
					}
					if (apply.data.data.length !== 0) {
						this.nomore = true
						this.nodata = false
					}

					if (this.hasMore) {
						this.pageIndex = this.pageIndex + 1
					} else {
						this.load = false
						if (apply.data.data.length == 0) {
							this.nomore = true
						} else {
							this.nomore = false
						}
					}
				}

			},

			explainopen(e) {
				this.explainvalie = true
			},

			explainclose(e) {
				this.explainvalie = false
			},

			continuea(e) {
				uni.showToast({
					title: '请填写反馈内容',
					icon: "none",
					duration: 2000
				})
			},

			//点击折叠下拉
			changeToggle(index,atisShow) {
				var that = this;
				this.arrlist[index].fuckyou = !atisShow
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8fafc;
		// background-color: red;
	}

	// 数据内容
	.listbox {
		padding: 20rpx;
	}

	.listitem {
		margin-bottom: 25rpx;
	}

	.listview {
		padding: 30rpx;
		background-color: #ffffff;
		box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.list-title {
		font-size: 30rpx;
		color: #777777;
		margin-right: 30rpx;
	}

	.list-text {
		font-size: 30rpx;
		color: #2D2D2D;
	}

	.list-texta {
		width: 500rpx;
	}

	.listitembox {
		width: 500rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.listimage {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 15rpx;
		margin-right: 15rpx;
	}

	.listimage image {
		width: 100%;
		height: 100%;
	}

	.list-jindu {
		width: 450rpx;
		height: 40rpx;
		font-size: 30rpx;
		overflow: hidden;
	}

	.list-jindua {
		width: 450rpx;
		// height: 500rpx;
		font-size: 30rpx;
		overflow: hidden;
		transition: all 0.3s;
	}

	// 未解决已解决
	.buttombox {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0 30rpx 0;
	}

	.unresolved {
		width: 200rpx;
		height: 70rpx;
		background-color: #EEF2F6;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #4C4C4C;
		border-radius: 50rpx;
		margin-right: 30rpx;
	}

	.resolved {
		width: 200rpx;
		height: 70rpx;
		background-color: #2F334C;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		border-radius: 50rpx;
	}


	// 暂无数据
	.nodatabox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 188rpx;
	}

	.nodatatext {
		font-size: 28rpx;
		color: #000000;
		margin: 20rpx 0;
	}

	.nodataborder {
		border: 1px solid #e5e5e5;
		font-size: 28rpx;
		color: #353535;
		padding: 15rpx 50rpx;
		border-radius: 50rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	/* 展开 */
	.zhankai {
		width: 120rpx;
		height: 50rpx;
		background: rgba(0, 0, 0, .4);
		font-size: 25rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		margin-bottom: 25rpx;
	}

	.entry {
		width: 35rpx;
		height: 35rpx;
		margin-right: 5rpx;
	}

	// 弹窗
	.explainbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: rgba(0, 0, 0, .7);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.explainview {
		width: 570rpx;
		background-color: #ffffff;
		border-radius: 50rpx;
		padding: 0 20rpx;
	}

	.explaintitle {
		font-size: 35rpx;
		text-align: center;
		color: #2d2d2d;
		margin-top: 50rpx;
		margin-bottom: 20rpx;
	}

	.textarea-box {
		margin-top: 20rpx;
		background: #ffffff;
		border: 1px solid #e6e6e6;
		padding: 20rpx 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
	}

	.neirong {
		width: 100%;
		height: 200rpx;
	}

	//视频弹窗
	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: #000000;
	}

	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 1002;
	}

	.preview-full-close {
		position: fixed;
		right: 32rpx;
		top: 25rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 1003;
		color: #fff;
		font-size: 65rpx;
		font-weight: bold;
	}
</style>